<!-- 头部导航组件 -->
<template> 
	<view class="stat">
		<div class="one-other" :style="'margin-top:' + demo +'px;'">
			<div class="other" >
				<div class="slot-one-style">
					<slot name="left-slot" ></slot>
				</div>
				<div class="slot-tow-style">
					<h4><slot name="center-slot"></slot></h4>
				</div>
				<div class="slot-shree-style"> 
					<slot name="right-slot"></slot>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	  data () {
	            return { 
	                demo: 40
	            }
	        },
			mounted() {
	            this.demo = uni.getSystemInfoSync().statusBarHeight;
			}
}
</script>

<style scoped lang="scss">
	.one-other{
		width: 100%;
		background-color: #eee;
		position: fixed;
		z-index: 2;
		font-size: 20px;
	}
	
.other{
	height: 120rpx;
	line-height: 120rpx;
	margin: auto;
	width: 95%;
	display: flex;
	background: #eee;
	justify-content: space-between;
	.slot-one-style {
		font-size: 25px;
	}
	.slot-tow-style{
		padding-left: 15px;
	}
}
.slot-shree-style {
	padding-right: 15rpx;
	font-size: 30px;
}

.stat{
		background-color: #eee;
		position: fixed;
		z-index: 1;
		height: var(--status-bar-height);// --status-bar-height系统状态栏高度
		width: 100%;
		top: 0;
		left: 0;
	}

</style>
